// 类组件状态数据
import React, { Component } from 'react'
// 状态的三个方向，定义，读取，使用
export default class App extends Component {
  // 定义状态的方式1
 /*  constructor() {
      super()
      this.state = {
        count: 100,
        msg: 'hello'
      }
    } */
   // 定义状态的方式2（更简单）
   state = {
    count: 101,
    msg: 'world'
   }
   click1(){
    /* 由于click时普通函数，所以由window调用，当前this永远指向window， */
    console.log('click1',this);// this打印为undefind，所以需要使用bind绑定，改变函数的this指向
    // console.log(111);

   }
   click2 = () => {
    console.log(this);
    
   }
   addCount(num) {
    /* this.state.count += num; // 这种方法可以给i便状态数据，但时不会不会触发组件的重新渲染
    console.log('count',this.state.count); */

    // 这种方法会触发count 的修改，并且重新调用render渲染
    this.setState({
      count: this.state.count + num
    })
    
   }
  render() {
    console.log('render run');
    
    /* const {count, msg} = this.state
    // 使用方式1
    return (
      <div>
        App
      <div>count: {this.state.count}---{count}</div>
      <div>msg: {this.state.msg}---{msg}</div>
      </div>
    )*/
   const {count, msg} = this.state
  
    return (
      <div>
          count:{count},msg: {msg}
          {/* 这里要想将当前的this指向实例对象的this，只能使用bind，使用call会直接执行 */}
          <h2>绑定事件</h2>
          <button onClick={this.click1.bind(this)}>通过bind修改click中的this指向</button>
          <p></p>
          <button onClick={() => this.click1()}>包裹箭头函数，由于箭头函数中的this指向当前实例对象，this就随之修改</button>
          <p></p>
          <button onClick={this.click2}>将原函数包裹成箭头函数，可以直接调用</button>
          <div>
            使用原则：
          <p> bind(this,参数1，参数2)  箭头函数 函数(参数1，参数2)</p> 
            1，是否可以传参： bind修改this，包裹箭头函数
            2，是否占用内存空间：bind修改this，包裹箭头函数

        </div>
        <h2>修改状态的值</h2>
        <button onClick={()=>this.addCount(2)}>count ++</button>
      </div>
    )
  } 
}
